#diagram-show-hide{
color:#ff661a;
font-size:1.25rem;
font-family: 'proximanova-bold', sans-serif;
font-weight:normal;
text-decoration:none!important;
}
#diagram-show-hide, #diagram-show-hide:after{
-webkit-transition:all 300ms;
transition:all 300ms;
}
#diagram-show-hide:hover{
opacity:0.7;
}
#diagram-show-hide:after{
content: "\f107";
font-family: "Font Awesome 5 Pro";
display:inline-block;
color:#a2a2a2;
margin-left:11px;
}
#diagram-show-hide.active:after{
transform: scaleY(-1);
}
.system-diagram > div:after{
content:'';
clear:both;
display:block;
}
#system-diagram-wrap{
 margin-bottom:2.5rem; 
/*margin-bottom: 1000px;*/
}
#system-diagram-wrap, #system-diagram-wrap *{
overflow-anchor: none;
}
#system-diagram-wrap, #system-diagram-wrap bold {
    font-family: 'proximanova-bold';
}
.system-diagram{/* display:none; */background:#919ba1 url(/assets/images/system-diagram-wrap-bg.png) left center repeat-y;/*background:#919ba1 url(images/system-diagram-wrap-bg.png) left center repeat-y;*/max-height:0;opacity:0;overflow:hidden;-webkit-transition:all 1000ms;transition:all 1000ms;position: relative;}
.system-diagram.active{
max-height:2000px;
opacity:1;
}
.system-diagram > div{/* width:100%; */max-width:100%;margin:0 auto;/* position: relative; */}
.system-diagram figure{
display:inline;
}
.system-diagram > div > div.image-wrap{
float:left;
width:960px;
max-width:100%;
}
.system-diagram > div > div.image-wrap img{
width:100%;
}
.system-diagram > div > div.image-wrap img.no-map{
display:none;
}
.system-diagram.active > div > figure > img{
-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.0);
box-shadow: 0 0 20px 0 rgba(0,0,0,0.0);
}
.system-diagram > div > div.console{background: #e8e8e8;float:right;width: 310px;min-height: 1000px;border: 1px solid #ccd8e0;/* border-bottom:none; */height: 100%;}
.system-diagram > div > div.clear{float:none;width:100%;background:none;min-height: 0px;}
.system-diagram > div > div > div{background: #f7f7f7;width:100%;padding: 0px 0px 0px 0px;border-bottom: 1px solid #ccd8e0;}
.system-diagram > div > div > div.inactive{padding-bottom: 0px;background: #e8e8e8;border-color: #bbbbbb;}
.system-diagram > div > div > div > div.content-wrap{
/* height:0px;  */
max-height:0px;
overflow:hidden;
padding: 0px 20px 10px; 
opacity:0;
}
.system-diagram > div > div > div.active > div.content-wrap{max-height: 800px;opacity:1;padding-top:10px;}
/* .system-diagram > div > div > div.active#one > div.content-wrap{
height:120px;
}
.system-diagram > div > div > div.active#two > div.content-wrap{
height:190px;
}
.system-diagram > div > div > div.active#three > div.content-wrap{
height:540px;
} */
.system-diagram > div > div > div > div.content-wrap p{
margin-bottom:0;
color:#5d6770;
}
.system-diagram > div > div > div > div.content-wrap p small{color:#161616;line-height:1.25;display:block;font-size:.75rem;font-family: 'proximanova-medium', sans-serif;font-weight:normal;margin-bottom: 8px;}
.system-diagram > div > div > div.active > div.clear{
height:0;
padding:0;
opacity:0;
}
.system-diagram h3{font-size:1.125em;color: #161616;float:left;padding-left:4px;margin-bottom: 0px;padding-top: 16px;}
.system-diagram h3 small{
display:block;
font-size:.675em;
}
.system-diagram h3.smaller{
max-width:85%;
}
.system-diagram .clear{
clear:both;
border:none;
}
.system-diagram > div > div > div > div.number-wrap > span {display:block;float:left;width:51px;height:51px;position:relative;margin-left: 4px;}
.system-diagram > div > div > div > div.number-wrap span.number{margin-top: 10px;margin-left: 10px;margin-right: 4px;display:block;position: relative;/* left: 50%; *//* top: 50%; */-ms-transform: translate(-50%,-50%);/* -webkit-transform: translate(-50%,-50%); *//* transform: translate(-50%,-50%); */height: 31px;width: 31px;/* padding-top: 7px; */font-size:1.25em;border-radius:38px;background: #ffffff;border: 1px solid #9aa3a9;color: #ff6619;font-weight:400;text-align:center;font-family: 'Bebas Neue', sans-serif;}
.system-diagram > div > div > div.active > div.number-wrap span.number{/* height:43px; *//* width: 43px; *//* padding-top:8px; *//* font-size:1.625em; *//* border-radius:51px; */}
.system-diagram > div > div > div.multi-line > div.number-wrap span.number{
margin-top:16px;
}
.system-diagram > div > div > div > div.number-wrap span.number, .system-diagram div.number-wrap, .system-diagram div.content-wrap{
-webkit-transition:all 500ms;
transition:all 500ms;	
}
#system-diagram-wrap .system-diagram ul{
margin-left:0;
}
#system-diagram-wrap .system-diagram ul li{font-size:.75em;padding-left: 24px;line-height:1.125;}
#system-diagram-wrap .system-diagram ul li a, #system-diagram-wrap .system-diagram ul li.nolink{
font-size:1rem;
}
.system-diagram span.btn-wrap{
background: #002a49;
margin-bottom: 0px;
}
.system-diagram > div > div > div.inactive:hover{background: #e2e2e2;cursor:pointer;}
#system-diagram-wrap area.active:focus{
/* outline:2px solid #ff6619; */
}
#system-diagram-wrap area.active{
/* outline:2px solid #ff6619;
background:#ff6619;
animation: outline 1s linear infinite; */
}

@keyframes outline {
 50% {
 outline:20px solid rgb(255 102 25 / 10%);
 }
}

@media only screen and (max-width:1480px){
	.system-diagram > div > div.console {
    width:35%;
	}
    .system-diagram > div > div.image-wrap{
    width:65%;
    max-width:65%;
    }
    .system-diagram > div > div > div.multi-line > div.number-wrap span.number{
    margin-top:10px;
    }
	.system-diagram > div > div.image-wrap img.no-map{
	display:block;
	}
       #diagram-img{
       display:none;
       }
    .system-diagram h3{
    font-size:18px!important;;
    }
    #system-diagram-wrap .system-diagram > div > figure > img.sticky{
    width: calc(65% - 26px);
    }
	#system-diagram-wrap .system-diagram > div > figure > img {
    width:65%;
	}
    .system-diagram{
    background-size:65%;
    }
	div#system-diagram-wrap {
    padding-left: 0px;
    padding-right: 0px;
	}
	.system-diagram .container{
	padding-left:20px;
	padding-right:20px;
	max-width: 100%;
	box-sizing: border-box;
	}
	.system-diagram > div > div > div.active > div.taller, .system-diagram > div > div > div.active > div {
/*     height: 600px; */
	}
}
@media only screen and (max-width:1280px){
.system-diagram h3 {
    font-size: 1.5em;
}
}
@media only screen and (max-width:1250px){

}
@media only screen and (max-width:1180px){

}
@media only screen and (max-width:1080px){
	#system-diagram-wrap .system-diagram ul li {

	}
	.system-diagram h3 {

	}
	.system-diagram > div > div > div.active > span > span span.number {
	    height: 31px;
	    width: 38px;
	    padding-top: 7px;
	    font-size: 1.25em;
	    border-radius: 38px;
	}
	.system-diagram > div > div > div.active > div, .system-diagram > div > div > div > div{
	/* padding-left: 10px; */
	}
}
@media only screen and (min-width:981px){
.system-diagram.active > div > figure > img.sticky{
position:fixed;top:144px;
/*-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
-webkit-transition:all 300ms;
transition:all 300ms; */
}
.system-diagram.active > div > figure > img.sticky.absolute{
position:absolute;
bottom:0;
top:auto;
}
}
@media only screen and (max-width:980px){
    #system-diagram-wrap .system-diagram > div > figure > img, #system-diagram-wrap .system-diagram > div > figure > img.sticky{
    width:100%;
    }
	.system-diagram h3{
	font-size: 1.125em;
	}
	.system-diagram > div > div > div.active > div{
	padding-top:0px;
	}
	#system-diagram-wrap .system-diagram > div p{
	font-size:1em;
	}
	#system-diagram-wrap .system-diagram > div p.first{
	left:70%;
	}
	#system-diagram-wrap .system-diagram > div p.second{
	top:840px;
	width:350px;
	}
    .system-diagram > div > div > div > div.number-wrap > span{
    margin-left: 0!important;
    }
    .system-diagram > div > div > div.active > div.content-wrap{
    padding-top:10px;
    }
    .system-diagram > div > div.console{
    min-height:0;
    border-bottom:none;
    }
	.system-diagram > div > div {
    width:100%!important;
    max-width:100%!important;
    float:none!important;
	}
	#system-diagram-wrap .system-diagram > div{
/* 	text-align:center; */
	}
	#system-diagram-wrap .system-diagram > div > img {
    width:871px;
    max-width:100%;
    margin:0 auto;
    margin-bottom:10px;
    float:none;
	}
    .system-diagram > div > div.image-wrap img.second-image{
    display:none;
    }
	.system-diagram h3 {
    font-size: 1.5em;
    /* padding-top: 8px; */
    /* padding-left: 12px; */
    text-align: left;
 }
	.system-diagram > div > div > div.active > div, .system-diagram > div > div > div > div {
    padding-left: 20px;
 }
	#system-diagram-wrap .system-diagram > div p {
    /* font-size: 1.25em; */
 }
	#system-diagram-wrap .system-diagram ul li {
    /* font-size: 1.125em; */
 }
	.system-diagram > div > div > div.active > div.content-wrap.taller, .system-diagram > div > div > div.active > div.content-wrap {
    /* height: 360px; */
 }
	.system-diagram > div > div {
    min-height:0px;
	}
}
@media only screen and (max-width:960px){

}
@media only screen and (max-width:860px){
	#system-diagram-wrap .system-diagram > div p.second{
	top:800px;
	}
}
@media only screen and (max-width:840px){
	.system-diagram > div > div > div.active > div.content-wrap.taller{
	height:410px;
	}
}
@media only screen and (max-width:700px){
	.system-diagram > div > div > div.active > div.content-wrap {
	/* height: 440px; */
	}
	.system-diagram > div > div > div.active > div.content-wrap.taller{
	height: 460px;	
	}
	span.btn-wrap{
	width:90%;
	}
	#outer-wrap a.primary-btn{
	width:100%;
	text-align:center;
	padding-left:0px;
	padding-right:0px;
	}
}
@media only screen and (max-width:660px){
#diagram-show-hide{
font-size:1rem;
}
}
@media only screen and (max-width:540px){
	.system-diagram > div > div > div.active > div.content-wrap {
	/* height: 480px; */
	}
	.system-diagram > div > div > div.active > div.content-wrap.taller{
	height: 500px;	
	}
}
@media only screen and (max-width:520px){
	.system-diagram > div > div > div.active > div.content-wrap.taller {
	height: 540px;
	}
}
@media only screen and (max-width:440px){
	#system-diagram-wrap .system-diagram > div p {
	font-size: 1em;
	}
	#system-diagram-wrap .system-diagram ul li {
	/* font-size: 1em; */
	}
	.system-diagram h3 {
	font-size: 1.25em;
	/* padding-top: 12px; */
	}
}
@media only screen and (max-width:380px){

}
@media only screen and (max-width:360px){
	.system-diagram h3{
	font-size:1.125em;
	}
/* 	.system-diagram > div > div > div.active > div, .system-diagram > div > div > div > div.content-wrap {
	    height:auto!important;
        max-height:5000px!important;
	    opacity:1!important;
	} */
	.system-diagram h3{
	font-size:1em;
	}
}